<template>
  <div class="visitor">
    <a-card :bordered="false" class="visitor-btn" title="访客明细">
      <a-form ref="formRef" :model="formState" @finish="onFinish">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :name="`tiem`"
              :label="`时间`"
              :labelCol="{
                xs: { span: 24 },
                sm: { span: 2 }
              }"
              :wrapperCol="{
                xs: { span: 24 },
                sm: { span: 22 }
              }"
            >
              <a-radio-group v-model:value="formState[`timeType`]" button-style="solid">
                <a-radio-button value="1">2小时</a-radio-button>
                <a-radio-button value="4">24小时</a-radio-button>
                <a-radio-button value="5">当天</a-radio-button>
                <a-radio-button value="6">2天</a-radio-button>
                <a-radio-button value="7">3天</a-radio-button>
                <a-radio-button value="8">7天</a-radio-button>
                <a-radio-button value="9">30天</a-radio-button>
                <a-radio-button value="11">其他</a-radio-button>
              </a-radio-group>
              <a-range-picker
                class="ml-2"
                v-if="formState[`timeType`] == 11"
                v-model:value="formState[`time`]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :name="`host`"
              :label="`域名`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`host`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :name="`deviceClass`"
              :label="`设备类型`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`设备类型`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :name="`systemName`"
              :label="`操作系统`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`systemName`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item
              :name="`first`"
              :label="`语言`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`first`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :name="`browserType`"
              :label="`浏览器类型`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`browserType`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :name="`browserName`"
              :label="`浏览器`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`browserName`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :name="`country`"
              :label="`国家`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`country`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :name="`region`"
              :label="`地区`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`region`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :name="`city`"
              :label="`城市`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`city`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="8" v-show="expand">
            <a-form-item
              :name="`ckf`"
              :label="`用户指纹`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-input v-model:value="formState[`ckf`]"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" v-show="expand">
            <a-form-item
              :name="`ja4`"
              :label="`JA4指纹`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-input v-model:value="formState[`ja4`]"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" v-show="expand">
            <a-form-item
              :name="`ja3`"
              :label="`JA3指纹`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-input v-model:value="formState[`ja3`]"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8" v-show="expand">
            <a-form-item
              :name="`ip4`"
              :label="`ip4地址`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-input v-model:value="formState[`ip4`]"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="16" v-show="expand">
            <a-form-item
              :name="`security`"
              :label="`IP风控`"
              :labelCol="col16State.labelCol"
              :wrapperCol="col16State.wrapperCol"
            >
              <a-checkbox-group style="width: 100%">
                <a-checkbox v-model:value="formState[`securityAnonymous`]">匿名</a-checkbox>
                <a-checkbox v-model:value="formState[`securityProxy`]">代理</a-checkbox>
                <a-checkbox v-model:value="formState[`securityVpn`]">VPN</a-checkbox>
                <a-checkbox v-model:value="formState[`securityTor`]">匿名</a-checkbox>
                <a-checkbox v-model:value="formState[`securityHosting`]">机房A</a-checkbox>
              </a-checkbox-group>
            </a-form-item>
          </a-col>
          <a-col :span="8" v-show="expand">
            <a-form-item
              :name="`referer`"
              :label="`访客来源`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-input v-model:value="formState[`referer`]"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="16" v-show="expand">
            <a-form-item
              :name="`path`"
              :label="`访问路径`"
              :labelCol="col16State.labelCol"
              :wrapperCol="col16State.wrapperCol"
            >
              <a-input v-model:value="formState[`path`]"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" html-type="submit">查询</a-button>
            <a-button style="margin: 0 8px" @click="onReset">重置</a-button>
            <a style="font-size: 12px" @click="expand = !expand">
              <template v-if="expand">
                <UpOutlined />
                收起
              </template>
              <template v-else>
                <DownOutlined />
                展开
              </template>
            </a>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card :bordered="false" class="visitor-body visitor-btn" title="数据明细">
    <a-table :columns="columns" :data-source="data" :scroll="{ x: 800, y: 400 }"
    :pagination="pagination"
    @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'access'">
          <div><span>时间：</span>{{ record.newTime }}</div>
          <div class="ih">
            <span class="th">访问网址： </span
            ><a :href="record.url" target="_blank">{{ record.url }}</a>
          </div>
          <div class="ih">
            <span>访问来源： </span
            ><a :href="record.referer" target="_blank">{{ record.referer }}</a>
          </div>
        </template>

        <template v-if="column.key === 'fingerprint'">
          <div>
            <span>指纹：</span>
            <span class="th">{{ record.ckf }} </span>
          </div>
          <div><span>JA3：</span>{{ record.ja3 }}</div>
          <div><span>JA4：</span>{{ record.ja4 }}</div>
        </template>
        <template v-if="column.key === 'system'">
          <div><span class="th">类型：</span>{{ record.deviceClass }}</div>
          <div class="ih">
            <span>设备：</span>
            <span>{{ record.deviceBrand }}-{{ record.deviceVersion }}</span>
          </div>
          <div><span>系统：</span> {{ record.systemName }}-{{ record.systemVersion }}</div>
        </template>

        <template v-if="column.key === 'browser'">
          <div class="ih">
            <span>类型：</span>
            <span>{{ record.browserType }}</span>
          </div>
          <div class="ih">
            <span class="th">名称：</span>
            <span>{{ record.browserName }}</span>
          </div>
          <div class="ih">
            <span>版本：</span>
            <span>{{ record.browserVersion }}</span>
          </div>
        </template>

        <template v-if="column.key === 'language'">
          <div>
            <span class="th">首选：</span> <span>{{ record.first }}</span>
          </div>
          <div class="iih">
            <span>次要：</span>
            {{ languageF(record.result) }}
          </div>
        </template>
        <template v-if="column.key === 'ipAddress'">
          <span>{{ record.clientIp }}</span
          ><br />
          <div class="iih" v-if="record.continent">
            <span>
              <span class="th">{{ record.continent }}</span
              >-{{ record.country }}-{{ record.region }}-{{ record.city }}</span
            >
          </div>
        </template>
        <template v-if="column.key === 'security'">
          <div class="ih" v-if="record.connectionOrg">
            {{ record.connectionOrg }}({{ record.connectionAsn }})
          </div>
          <a-tag class="ml-2" color="orange" v-if="record.securityHosting == 1">机房</a-tag>
          <a-tag class="ml-2" color="orange" v-if="record.securityProxy == 1">代理</a-tag>
          <a-tag class="ml-2" color="red" v-if="record.securityVpn == 1">VPN</a-tag>
          <a-tag class="ml-2" color="orange" v-if="record.securityTor == 1">匿名</a-tag>
        </template>
        <template v-if="column.key === 'timeZone'">
          <div v-if="record.timeZone">
            <span>客户端：</span>
            <span>{{ record.timeZone }}</span>
          </div>
          <div v-if="record.timezoneId">
            <span>IP归属地：</span>
            <span>{{ record.timezoneId }}</span>
          </div>
        </template>
      </template>
    </a-table>
  </a-card>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import { type FormInstance, type TableColumnsType } from 'ant-design-vue'

const expand = ref(false)
const formRef = ref<FormInstance>()
const formState = reactive<any>({})
const current = ref(1)
const pageSize = ref(10)
const pagination = computed(() => ({
  current: current.value,
  pageSize: pageSize.value,
  showTotal: (total:any) => `共 ${total} 条`,
  total: data.length,
  showSizeChanger: true
}))
const handleTableChange=(pag:any)=>{
  current.value=pag.current;
  pageSize.value=pag.cpageSizeurrent;
}
const colState = reactive<any>({
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 }
  }
})
const col16State = reactive<any>({
  labelCol: {
    xs: { span: 24 },
    sm: { span: 3 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 21 }
  }
})
const onReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}
const languageF = (l: any) => {
  if (!l) {
    return ''
  }
  const ll = JSON.parse(l)
  let larr = []
  for (let i in ll) {
    larr.push(ll[i].language + '(' + ll[i].priority + ')')
  }
  return larr.join('、')
}
const onFinish = (values: any) => {
  console.log('Received values of form: ', values)
  console.log('formState: ', formState)
}

const columns: TableColumnsType = [
  { title: '序号', width: 100, dataIndex: 'id', key: 'id', fixed: 'left',align:"center" },
  { title: '访问信息', width: 300, dataIndex: 'access', key: 'access' },
  { title: '指纹', dataIndex: 'fingerprint', key: 'fingerprint', width: 340 },
  { title: '设备系统', dataIndex: 'system', key: 'system', width: 200 },
  { title: '客户端', dataIndex: 'browser', key: 'browser', width: 150 },
  { title: 'IP归属', dataIndex: 'ipAddress', key: 'ipAddress', width: 200 },
  { title: 'IP风控', dataIndex: 'security', key: 'security', width: 250 },
  { title: '语言', dataIndex: 'language', key: 'language', width: 250 },
  { title: '时区', dataIndex: 'timeZone', key: 'timeZone', width: 200 }
]

interface DataItem {
  id: number
  host: string
  path: string
  url: string
  referer: string
  ckf: string
  ja4: string
  ja3: string
  newTime: string
  timeZone: string
  first: string
  result: string
  deviceClass: string
  deviceBrand: string
  deviceVersion: string
  systemClass: string
  systemName: string
  systemVersion: string
  browserType: string
  browserName: string
  browserVersion: string
  clientIp: string
  continent: string
  country: string
  region: string
  city: string
  connectionAsn: string
  connectionOrg: string
  timezoneId: string
  securityAnonymous: number
  securityProxy: number
  securityVpn: number
  securityTor: number
  securityHosting: number
}

const data: DataItem[] = []
for (let i = 0; i < 100; i++) {
  data.push({
    id: i,
    host: 'asdajk.com',
    path: '/nacos/index.html',
    url: 'http://asdajk.com/nacos/index.html#/configeditor?serverId=center&dataId=visitor-api.yaml&group=DEFAULT_GROUP&namespace=&edasAppName=&edasAppId=&searchDataId=&searchGroup=&pageSize=10&pageNo=1',
    referer: 'https://www.baidu.com/',
    ckf: '7c467f0d-4b7e-40aa-b840-deaa908ef636',
    ja4: 't13i1516h2_8daaf6152771_b1ff8ab2d16f',
    ja3: 'f5ce2c88233f6a45a0d90ed4bd3e0d97',
    newTime: '2024-05-16 15:52:18',
    timeZone: 'asdasd/12',
    first: 'zh-CN',
    result: '[{"language":"zh-CN","priority":1.0},{"language":"zh","priority":0.9}]',
    deviceClass: 'Desktop',
    deviceBrand: '',
    deviceVersion: '',
    systemClass: 'Desktop',
    systemName: 'Windows NT',
    systemVersion: '',
    browserType: 'Browser',
    browserName: 'Chrome',
    browserVersion: '123',
    clientIp: '101.44.83.234',
    continent: '亚洲',
    country: '中国',
    region: '湖北',
    city: '恩施',
    connectionAsn: 'A12334',
    connectionOrg: '湖北电信',
    timezoneId: 'asdasd/12',
    securityAnonymous: 1,
    securityProxy: 1,
    securityVpn: 1,
    securityTor: 1,
    securityHosting: 1
  })
}
</script>
<style lang="less">
.th {
  color: var(--colorPrimary);
}
.ml-2 {
  margin-left: 5px;
}
.ih {
  white-space: nowrap; /* 保持文本在一行，不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
}

.iih {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iiih {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visitor {
  .ant-form-item {
    margin-bottom: 12px;
  }
  .visitor-body {
    .ant-card-body {
      padding: 0px;
    }
  }
  .visitor-btn {
    margin-bottom: 10px;
  }
}
</style>
